page-client-claim{
    @function pxToVw($px) {
        @return $px/1080*100vw;
    }
    ion-header .toolbar-background-ios {
        background: linear-gradient(to right, #63b24c, #018c6e);
    }

    ion-header .toolbar-title-ios{
        color: #fff;
    }

    .claim-list{
        width: 100vw;
        position: relative;
        .claim-item{
            margin-bottom: 4vw;
            .fixed-year{
                position: fixed;
                width: 100vw;
                top: 17.6vw !important;
            }
            .claim-year{
                background: #fff;
                font-size: pxToVw(42);
                height: pxToVw(112);
                padding: 0 6vw;
                color: #6d6e70;
                display: flex;
                align-items: center;
                justify-content: space-between;
                //position: sticky;
                //top: -1px;
                .chaim-icon{
                    width: pxToVw(48);
                    height: pxToVw(48);
                    background-size: cover;
                }
                .chaim-icon-up{
                    background-image: url("../assets/images/client/client-claim/ic_arrow-up.png");
                }
                .chaim-icon-down{
                    background-image: url("../assets/images/client/client-claim/ic_arrow-down.png");
                }
            }
            .claim-year-list{
                &.isFixed{
                    margin-top: 18vw;
                }
                margin: 6vw 6vw 0 6vw;
                width: 88vw;
                .claim-year-item{
                    box-shadow: -1px 1px 5px 0px #ddd;
                    padding: 4vw;
                    background: #fff;
                    margin-bottom: 6vw;
                    &.border-green{
                        border-left: 1vw solid #35b24c;
                    }
                    &.border-red{
                        border-left: 1vw solid #da5c56;
                    }
                    &.border-yellow{
                        border-left: 1vw solid #e7b44a;
                    }
                    .claim-title{
                        border-bottom: 1px solid #e9e9e9;
                        padding-bottom: 3vw;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .title-name{
                            color: #333333;
                            font-size: pxToVw(42);
                        }
                        .title-type{
                            font-size: pxToVw(42);
                            &.title-green{
                                color: #35b24c;
                            }
                            &.title-red{
                                color: #da5c56;
                            }
                            &.title-yellow{
                                color: #e7b44a;
                            }
                        }
                    }
                    .claim-info{
                        margin: 1vw 0;
                        p{
                            margin: 0;
                            padding: pxToVw(12) 0;
                            color: #666666;
                            font-size: pxToVw(42);
                            span{
                                float: right;
                                &:after{
                                    clear: right;
                                }
                            }
                        }
                        .claim-reason-type{
                            color: #e66660;
                            font-size: pxToVw(36);
                        }
                        .claim-reason{
                            padding: 2vw;
                            background: #fbeeee;
                            color: #666666;
                            font-size: pxToVw(36);
                            margin-top: 1vw;
                            line-height: 1.6;
                        }
                    }
                }
            }
        }
    }

    .fixedsticky {
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -ms-sticky;
        position: -o-sticky;
        position: sticky;
    }
    .fixedsticky-withoutfixedfixed .fixedsticky-off,
    .fixed-supported .fixedsticky-off {
        position: static;
    }
    .fixedsticky-withoutfixedfixed .fixedsticky-on,
    .fixed-supported .fixedsticky-on {
        position: fixed;
    }
    .fixedsticky-dummy {
        display: none;
    }
    .fixedsticky-on + .fixedsticky-dummy {
        display: block;
    }
}
